<template>
  <div class="header">
    <div class="header-inner clearfix">
      <img class="logo fl" src="../../../static/images/logo.png" alt="">
      <ul class="fr menu-list clearfix">
        <li>
          <router-link to="/" exact>首页</router-link>
        </li>
        <li>
          <router-link to="/about">关于我们</router-link>
        </li>
        <li>
          <router-link :to="'/guide'">办事指南</router-link>
        </li>
        <li>
          <router-link to="/news">新闻动态</router-link>
        </li>
        <li>
          <router-link to="/counsel">在线咨询</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.header {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
}

.header-inner {
  margin: 0 auto;
  width: 1200px;
  height: 100px;
}

.header-inner .logo {
  margin-top: 7px;
}

.header-inner .menu-list li {
  float: left;
  margin: 60px 35px 0;
  width: 65px;
  text-align: center;
}

.header-inner .menu-list li:nth-last-child(1) {
  margin: 60px 0 0 35px;
}

.header-inner .menu-list li a {
  font-size: 16px;
}

.header-inner .menu-list li a.link-active {
  border-bottom: 2px solid #e82822;
  padding-bottom: 10px;
  color: #e82822;
}

.header-inner .menu-list li a:hover {
  color: #e82822;
}
</style>

